<template>
    <div id="permission">
        <h2> <i :class="'el-icon-user-solid'"></i> {{roleName}}</h2>
        <el-divider></el-divider>
        <el-button type="primary" @click="showAdd" >添加权限</el-button>
        <h4>已拥有的权限:</h4>
        <el-collapse accordion>
            <el-collapse-item v-for="item in data">
                <template slot="title">
                    {{item.description}}    --   {{item.controllerCode}}
                </template>
                <div>

                    <el-table
                            :data="item.permissionList"
                            style="width: 100%"
                            max-height="500">
                        <el-table-column
                                prop="description"
                                label="描述">
                        </el-table-column>
                        <el-table-column
                                prop="permissionName"
                                label="权限名">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="请求类型">
                        </el-table-column>
                        <el-table-column
                                prop="url"
                                label="请求路径">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作">
                            <template slot-scope="scope">
                                <el-button @click="deleteRolePermission(scope.$index,scope.row)" type="text" size="small">移除权限</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-collapse-item>
        </el-collapse>

        <el-dialog
                title="添加角色未拥有的权限"
                :visible.sync="addDialogVisible"
                width="60%"
                @close="getHad"
                center>
            <el-collapse accordion>
                <el-collapse-item v-for="item in isNotExistData">
                    <template slot="title">
                        {{item.description}}    --   {{item.controllerCode}}
                    </template>
                    <div>

                        <el-table
                                :data="item.permissionList"
                                ref="multipleTable"
                                tooltip-effect="dark"
                                style="width: 100%"
                                max-height="500"
                                @selection-change="selectionChange">

                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="description"
                                    label="描述">
                            </el-table-column>
                            <el-table-column
                                    prop="permissionName"
                                    label="权限名">
                            </el-table-column>
                            <el-table-column
                                    prop="type"
                                    label="请求类型">
                            </el-table-column>
                            <el-table-column
                                    prop="url"
                                    label="请求路径">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-collapse-item>
            </el-collapse>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" :aria-disabled="true" @click="addPermission">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Permission",
        data() {
            return {
                addDialogVisible: false,
                id:null,
                roleName:null,
                data:[
                    {
                        id:null,
                        controllerCode:null,
                        description:null,
                        permissionList:[
                            {
                                id:null,
                                controllerCode:null,
                                description:null,
                                permissionName:null,
                                type:null,
                                url:null
                            }
                        ]
                    }
                ],
                isNotExistData:[
                    {
                        id:null,
                        controllerCode:null,
                        description:null,
                        permissionList:[
                            {
                                id:null,
                                controllerCode:null,
                                description:null,
                                permissionName:null,
                                type:null,
                                url:null
                            }
                        ]
                    }
                ],
                addData:{
                    id: null,
                    roleName: null,
                    permissionList:[
                        {
                            id:null,
                            controllerCode:null,
                            description:null,
                            permissionName:null,
                            type:null,
                            url:null
                        }
                    ]
                },
                rolePermissionData: {
                    roleId: null,
                    permissionName: null
                }
            }
        },
        methods:{
            /*查看已拥有的权限*/
            async getHad() {
                const resp = await this.$http.get("/sysPermission/getTreeByRoleId?id="+this.id);
                const data = resp.data;
                if (data.code === 200){
                    this.data = data.rows;
                }else {
                    this.$message.error(data.info)
                }
            },
            /*显示添加权限的dialog*/
            async showAdd() {
                this.addDialogVisible = true;
                const resp = await this.$http.get("/sysPermission/getByNotRoleId?id=" + this.id);
                const data = resp.data;
                if (data.code === 200){
                    this.isNotExistData = data.rows;
                }else {
                    this.$message.error(data.info)
                }
            },
            /*当选择选择框时赋值*/
            selectionChange(rows){
                this.addData.permissionList = rows;
            },

            /*添加权限*/
            async addPermission() {
                this.addData.id = this.id;
                this.addData.roleName = this.roleName;
                const resp = await this.$http.post("/sysPermission/addRolePermission", this.addData);
                const data = resp.data;
                if (data.code === 200) {
                    this.$message.success("添加成功");
                    this.showAdd();
                    this.addData.permissionList = {
                        id: null,
                        controllerCode: null,
                        description: null,
                        permissionName: null,
                        type: null,
                        url: null
                    };
                }else {
                    this.$message.error(data.info)
                }
            },
            /*移除权限*/
            deleteRolePermission(index,row){
                this.$confirm("确定移除吗?","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(() => {
                    this.rolePermissionData.roleId = this.id;
                    this.rolePermissionData.permissionName = row.permissionName;
                    this.$http.post("/sysPermission/deleteRolePermission",this.rolePermissionData).then(resp => {
                        const data = resp.data;
                        if (data.code === 200){
                            this.$message.success(data.info);
                            this.getHad();
                        }else {
                            this.$message.error(data.info);
                        }
                    })
                }).catch(() => {})
            }
        },

        created() {
            const id = this.$route.query.id;
            const roleName = this.$route.query.roleName;
            this.id = id;
            this.roleName = roleName;
            this.getHad();
        }
    }
</script>

<style scoped>

</style>
